<template>
  <view class="idiom">
    <view class="item-view" :style="{ 'background-image': 'url(' + head + ')' }" ></view>
    <view class="item-view" :style="{ 'background-image': 'url(' + input + ')' }" ></view>
    <view class='item-view' :style="{ 'background-image': 'url(' + bottom + ')' }" ></view>
    <Start  v-if="defStatus === EnumStatus.STATUS" v-model:content="content" v-model:defStatus="defStatus"  />
    <Result v-else :content="content" v-model:defStatus="defStatus"  />
  </view>
  <Roast />
  <Recommend :top='98'/>
  <ToDY />
</template>
<script setup lang="ts">
import { EnumStatus } from "@/utils/constants";
import Start from "./components/Start.vue";
import Result from "./components/Result.vue";

import Roast from "@/components/Roast/Roast.vue";
import Recommend from "@/components/Recommend/Recommend.vue";
import ToDY from "@/components/ToDY/ToDY.vue";

const defStatus = ref(EnumStatus.STATUS)
const content = ref()
const head = computed(()=>{
    return defStatus.value === EnumStatus.STATUS ? 'http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230428/9b9b85e38bcedadc2c8d94529204c0be.png' 
    : 'http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230428/2006ede3f2adb7725285f54cdb27df30.png'
})
const input = computed(()=>{
    return 'http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230428/0216b716b2a8708e9f4a8a1eeb248731.png'
   
})
const bottom = computed(()=>{
    return defStatus.value === EnumStatus.STATUS ? "http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230428/6ea55e8eae2647eaf3fb3698936f9589.png" :
        'http://img-miniprogram-o.doutuimao.net/miniadmin/programconfig/xcximg/20230428/858cf5d67d6bfe2ce56fa544bdfc87c6.png'
    
})
</script>

<style>
page{
    width: 100%;
    height: 100%;
}

</style>
<style lang="scss" scoped>
.idiom{
    width: 100%;
    height: 100%;
    .item-view{
        width: 100%;
        height: 33.33%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}
</style>
